<template>
    <div class="main-container">
        <!-- 标题区域 -->
        <h1 class="main-title">食用农产品全城通</h1>

        <!-- 查询区域容器 -->
        <div class="query-container">
            <!-- 快检报告模块 -->
            <section class="query-module">
                <h2 class="module-title">快检报告查询</h2>
                <div class="input-wrapper">
                    <el-input size="large" v-model="reportNumber" placeholder="输入快检报告编号" clearable
                        @keyup.enter="handleReportQuery" />
                    <el-button size="large" type="primary" @click="handleReportQuery" class="query-btn">
                        查询
                    </el-button>
                </div>
            </section>

            <!-- 溯源码模块 -->
            <section class="query-module">
                <h2 class="module-title">溯源码查询</h2>
                <div class="input-wrapper">
                    <el-input size="large" v-model="traceCode" placeholder="输入溯源码" clearable
                        @keyup.enter="handleTraceQuery" />
                    <el-button size="large" type="primary" @click="handleTraceQuery" class="query-btn">
                        查询
                    </el-button>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 响应式数据
// const reportNumber = ref('JCNTS20250327608037')
// const traceCode = ref('1716782419094')
const reportNumber = ref()
const traceCode = ref()
// 查询处理方法
const handleReportQuery = () => {
    if (!reportNumber.value) {
        return ElMessage({
            message: '请输入报告编号',
            type: 'info',
        })
    }
    console.log('快检报告查询:', reportNumber.value)
    // 这里可加入API请求逻辑
    router.push({ name: 'report', params: { id: reportNumber.value } })
}

const handleTraceQuery = () => {
    if (!traceCode.value) {
        return ElMessage({
            message: '请输入溯源码',
            type: 'info',
        })
    }
    console.log('溯源码查询:', traceCode.value)
    // 这里可加入API请求逻辑
    router.push({ name: 'coder', params: { id: traceCode.value } })
    // router.push('/coder')
}
</script>

<style scoped>
/* 主容器优化 */
.main-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 基础渐变保留 */
    background:
        /* 主浅蓝渐变 */
        linear-gradient(150deg, #f0f9ff 0%, #e1f3ff 100%),
        /* 基础网格 */
        repeating-linear-gradient(45deg,
            transparent 0px,
            transparent 24px,
            rgba(92, 178, 255, 0.08) 24px,
            rgba(92, 178, 255, 0.08) 25px,
            transparent 25px);
}

/* 标题增强 */
.main-title {
    color: #2d3436;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 12px;
    text-align: center;
}

.main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background-color: #1aa157;
    border-radius: 2px;
}

.query-container {
    width: 60%;
    max-width: 700px;
}

/* 查询模块升级 */
.query-module {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow:
        0 4px 12px rgba(28, 52, 99, 0.06),
        inset 0 0 0 1px rgba(51, 154, 240, 0.1);
    transition: transform 0.3s ease;
}


.module-title {
    color: #495057;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.module-title::before {
    content: "🔍";
    font-size: 0.9em;
    opacity: 0.8;
}

/* 输入组件优化 */
:deep(.el-input__wrapper) {
    border-radius: 8px;
    background: rgba(241, 243, 245, 0.6);
    box-shadow:
        0 2px 4px rgba(28, 52, 99, 0.03),
        inset 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-input__wrapper.is-focus) {
    background: #fff;
    box-shadow:
        0 0 0 2px #4dabf7,
        0 4px 12px rgba(77, 171, 247, 0.1);
}

/* 按钮升级 */
:deep(.el-button--primary) {
    border: none;
    border-radius: 8px;
}


/* 输入组件容器 */
.input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* 输入框扩展宽度 */
:deep(.el-input) {
    flex: 1;
    min-width: 220px;
}

/* 按钮保持固定宽度 */
.query-btn {
    width: 100px;
    flex-shrink: 0;
}

/* 移除焦点轮廓 */
:deep(.el-button) {
    outline: none !important;
    background-color: #1aa157;
}

/* 修正点击状态边框 */
:deep(.el-button--primary:active),
:deep(.el-button--primary:focus) {
    border-color: var(--el-button-active-border-color) !important;
    box-shadow:
        0 4px 6px rgba(51, 154, 240, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 统一按钮状态过渡 */
:deep(.el-button--primary) {
    transition:
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s ease;
}
</style>